<template>
  <div class="nav" :style="{
      background: bgColor,
      'border-width': bdWidth + 'px'
    }">
    <ul>
      <li :class=" arrow === 'gray' ? 'gray' : 'default' " @click="$router.go(-1)"></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "go-back-nav",
  props: {
    bgColor: {
      type: String,
      default: "#fff"
    },
    bdWidth: {
      type: String,
      default: "1"
    },
    arrow: {
      type: String,
      default: "default"
    }
  },

  components: {},
  mounted() {},
  updated() {},
  methods: {}
};
</script>

<style scoped>
.nav {
  width: 100%;
  height: 30px;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  border-bottom: 1px solid #e8eaec;
  z-index: 99;
}
.nav ul {
  width: 6.4rem;
  height: 1.25rem;
  padding-top: 0.15rem;
}
.nav ul li {
  width: 0.29rem;
  height: 0.31rem;
  background-size: 100%;
  margin: 0 0 0 0.38rem;
}
.nav ul li.gray {
  background: url(./assets/img/history1.png) no-repeat 0 0;
  width: 6.25rem;
  height: 6.25rem;
  background-size: 100%;
  margin: 0 0 0 0.38rem;
}
.nav ul li.default {
  background: url(./assets/img/history.png) no-repeat 0 0;
  width: 1.25rem;
  height: 1.25rem;
  background-size: 100%;
  margin: 0 0 0 0.38rem;
}
</style>
